<template>
	<view class="discount page bgf5">


		<scroll-view scroll-y class="bgf5 group c00" :style="{height: 'calc(100vh - 156rpx - ' + statusBar + 'px)'}">
			<view v-for="(item,index) in list" :key="index" class="px10 bgff r6 py12 my10 mx16 shadow" @click="clickItem(item)">
				<view class="bold6 pb8">{{item.tuan.name}}</view>
				<view class="flex flexC fs12 pb12 box">
					<text class="flex1">有效期至：{{item.end}}</text>
					<view class="mr4">
						<view class="origin">原价:{{item.tuan.line_price}}</view>
						<view class="c57 mt2">限时特惠价</view>
					</view>
					<view class="cff0">
						<text class="fs12">￥</text>
						<text class="fs28 bold6">{{item.tuan.price}}</text>
					</view>
				</view>
				<view class="flex flexC pt12">
					<view @click.stop="openItem(item)" class="flex1 flexC flex ">
						<text class="c9d fs12">团购券使用规则：</text>
						<image class="w10" :class="item.check ? 'up' : ''" src="/static/img/icon/up.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<view v-if="item.check" class="mt6 bgff">
					<view class="fs12 px10 mb5" v-for="(rule,index) in item.rule" :key="subIndex">
						<text class="c2e">{{rule.id}}.{{rule.value}}</text>
					</view>

					<view class="fs12 px10 mb5" @click="look(item)">
						<text class="c57">查看使用门店></text>
					</view>
				</view>
			</view>
			
			<!-- 团购券使用范围弹框 -->
			<uni-popup type="center" ref="popup">
				<view class="bgff r10 px30 pb20 flex flexC flexJC flexCol">
					<view class="fs16 bold6 py22">团购券使用范围</view>
					<view class="bor57 aliC" >
						<view class="flex flexC borb57">
							<view class="left py5">适用门店</view>
							<view class="right py5">适用包间</view>
						</view>
						<view class="flex flexC fs12" v-for="item in currentShopRoom">
							<view class="left">【{{item.shopName}}】</view>
							<view class="right">
								<view v-for="(sub,index) in item.room" :key="index" class="py4">{{sub.name}}</view>
							</view>
						</view>
					</view>
					<button class="bgf6c r40 w-15 fs14 mt20" @click="$refs.popup.close()">好的，知道啦</button>
				</view>
			</uni-popup>
		</scroll-view>

	</view>
</template>

<script>
	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;
	export default {
		data() {
			return {
				statusBar,

				list: [],
				selectShop: null,
				keyword: "",
				isSearch: false,
				id: '',
				currentShopRoom:null
			};
		},

		onLoad() {
			this.getList();
		},
		methods: {
			
			clickItem(item){
				let that = this;
				uni.showModal({
					title:"退款提示",
					content:"您是否要退款此团购券",
					confirmText:"退款",
					complete(res) {
						if(res.confirm){
							that.refund(item);
						}
					}
				})
			},
			refund(item){
				let param = {
					id:item.id,
				};
				let that = this;
				this.$api.tuanRefund(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.getData(that.selectShop);
						
					} else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
				
			},


			openItem(item) {

				// for(var i=0;i<this.list.length;i++){
				// 	this.list[i].check = false;
				// }
				if (item.check == true) {
					item.check = false;
				} else {
					item.check = true;
				}

				console.info("==item check==" + item.check);
			},
			
			look(item){
				let param = {
					id:item.tuan.id,
				};
				let that = this;
				this.$api.lookRoom(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.currentShopRoom = res.data;
						that.$refs.popup.open();
						
					} else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
				
			},

			getList() {
				let param = {};
				let that = this;
				this.$api.userTuanList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;


					} else {

					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.discount {
		.icon {
			width: 38rpx;
		}

		.down {
			width: 20rpx;
			height: 20rpx;
		}

		.ellipsis1 {
			max-width: 200rpx;
		}

		.active {
			position: relative;

			&::after {
				content: '';
				width: 120rpx;
				height: 8rpx;
				background-color: #576DAB;
				border-radius: 8rpx;
				position: absolute;
				bottom: 0;
				left: calc(50% - 60rpx);
			}
		}

		.group {
			.box {
				border-bottom: 4rpx dashed #eee;

				.origin {
					text-decoration-line: line-through;
				}
			}

			.w10 {
				width: 20rpx;
				height: 12rpx;
				transform: rotate(90deg);
				transition: .5s;

				&.up {
					transform: rotate(180deg);
				}
			}

			.borb57 {
				border-bottom: 2rpx solid #576DAB;
			}

			.left {
				width: 200rpx;
				height: 100%;
			}

			.right {
				width: 300rpx;
				border-left: 2rpx solid #576DAB;
			}
		}
	}
</style>
